appDisplay: CSS cleanup & fixes for app dialog

- change the container and dialog actor alignments
- pad the container to not have dialog overlap panel
- clean up extraneous app-folder css

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3044>

diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index 7286c089addf34d55f90ac503320bc64fdd001a9..e7efac75f54aee8b529135cefede073f7a8d65aa 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -1,13 +1,14 @@
 /* App Grid */
 
 $app_icon_size: 96px;
+$app_folder_size: 720px;
 
 // app icons
 .icon-grid {
   row-spacing: $base_padding * 2;
   column-spacing: $base_padding * 2;
-  max-row-spacing: $base_padding * 7;
-  max-column-spacing: $base_padding * 7;
+  max-row-spacing: $base_padding * 6;
+  max-column-spacing: $base_padding * 6;
   page-padding-top: $base_padding * 4;
   page-padding-bottom: $base_padding * 4;
   page-padding-left: $base_padding * 3;
@@ -52,22 +53,29 @@ $app_icon_size: 96px;
   }
 }
 
-// expanded folder
+.app-folder-dialog-container {
+  // pad the top with panel height so the folder doesn't overlap the panel on smaller resolutions
+  padding-top: $panel_height;
+}
+
+// Expanded app folder dialog
 .app-folder-dialog {
+  width: $app_folder_size;
+  height: $app_folder_size;
+
   border-radius: $modal_radius * 4;
   background-color: $system_overlay_bg_color;
+  box-shadow: inset 0 0 0 1px $system_borders_color;
+  padding: 0 1px;
 
   @if $is_highcontrast {
-    padding: $base_padding*2 2px $base_padding*2 2px;
+    padding: 0 2px;
     box-shadow: inset 0 0 0 2px $hc_inset_color;
-  } @else {
-    padding: $base_padding*2 1px $base_padding*2 1px;
-    box-shadow: inset 0 0 0 1px $system_borders_color;
   }
 
   & .folder-name-container {
-    padding: $base_padding * 4 $base_padding * 6 0;
-    spacing: $base_padding * 2;
+    padding: $base_padding * 4 $base_padding * 6;
+    padding-bottom: 0;
 
     & .folder-name-label,
     & .folder-name-entry {
@@ -76,32 +84,14 @@ $app_icon_size: 96px;
 
     & .folder-name-entry {
       width: 12em;
-      color: $system_fg_color !important;
     }
-
-    /* FIXME: this is to keep the label in sync with the entry */
-    & .folder-name-label { padding: 5px 7px; color: $system_fg_color; }
-  }
-
-  & .icon-grid {
-    row-spacing: $base_padding * 2;
-    column-spacing: $base_padding * 5;
-    page-padding-top: 0;
-    page-padding-bottom: 0;
-    page-padding-left: 0;
-    page-padding-right: 0;
   }
 
   & .page-indicators {
-    margin-bottom: 18px;
+    margin-bottom: $base_padding * 4;
   }
 }
 
-.app-folder-dialog-container {
-  padding: $base_padding * 2;
-  width: 720px;
-  height: 720px;
-}
 
 
 // Rename popup for app folders

diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 506bf18271db9605ced1d755ad532e384da5cdf9..14b2ab258740b5bed687093e1154897d023e2099 100644 (file)
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -2531,16 +2531,16 @@ export const AppFolderDialog = GObject.registerClass({
             style_class: 'app-folder-dialog',
             x_expand: true,
             y_expand: true,
-            x_align: Clutter.ActorAlign.FILL,
-            y_align: Clutter.ActorAlign.FILL,
+            x_align: Clutter.ActorAlign.CENTER,
+            y_align: Clutter.ActorAlign.CENTER,
             vertical: true,
         });
 
         this.child = new St.Bin({
             style_class: 'app-folder-dialog-container',
             child: this._viewBox,
-            x_align: Clutter.ActorAlign.CENTER,
-            y_align: Clutter.ActorAlign.CENTER,
+            x_align: Clutter.ActorAlign.FILL,
+            y_align: Clutter.ActorAlign.FILL,
         });
 
         this._addFolderNameEntry();